<template>
  <el-dialog class="config-dialog" append-to-body :before-close="handleDialogClose" :close-on-click-modal="false" :visible.sync="dialog" title="配置组合" width="900px">
    <template>
      <div class="uifix-search-dialog">
        <!-- 新增 -->
        <el-button
          v-permission="permission.add"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="handelAdd"
        >新增
        </el-button>
      </div>
    </template>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" height="500px">
      <el-table-column prop="groupName" label="名称">
        <template slot-scope="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.groupName" />
          <span v-else>{{ scope.row.groupName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="groupNodeList" label="应用节点">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.groupNodeList" multiple>
            <el-option v-for="(item,index) in dict.standard_process_node" :key="index" :label="item.label" :value="item.value" />
          </el-select>
          <span v-else v-text="scope.row.groupNodeName" />
        </template>
      </el-table-column>
      <el-table-column prop="groupSize" label="最少必做量">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.groupSize">
            <el-option v-for="(item,index) in groupSizeList" :key="index" :label="item" :value="item" />
          </el-select>
          <span v-else v-text="scope.row.groupSize" />
        </template>
      </el-table-column>
      <el-table-column v-if="checkPer(['admin','standardDrawingRelationGroup:edit','standardDrawingRelationGroup:del'])" label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <!-- 编辑状态下显示保存和取消按钮 -->
          <template v-if="scope.row.isEdit">
            <el-button type="text" size="mini" @click="handleSave(scope.row)"><svg-icon icon-class="save-icon" /> 保存</el-button>
            <el-button type="text" size="mini" @click="handleCancel(scope.row,scope.$index)"><svg-icon icon-class="cancel-icon" /> 取消</el-button>
          </template>
          <!-- 非编辑状态下显示编辑和删除按钮 -->
          <template v-else>
            <el-button type="text" size="mini" @click="handleEdit(scope.row)"><svg-icon icon-class="icon-edit" /> 编辑</el-button>
            <el-button class="uifix-table-action-error-btn" type="text" size="mini" icon="el-icon-delete" @click="crud.doDelete(scope.row)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import crudConfigGroup, { add, edit } from '@/api/modelQuality/standardDrawingRelationGroup'
import CRUD, { presenter, header, crud } from '@brotherCrud/crud'
export default {
  mixins: [presenter(), header(), crud()],
  dicts: ['standard_process_node'],
  props: {
    discipline: {
      type: String,
      required: true
    }
  },
  cruds() {
    return CRUD({
      title: '配置组合', url: 'api/standardDrawingRelationGroup', idField: 'groupId', queryOnPresenterCreated: false, query: { page: 0, size: 10000 }, sort: 'groupId,asc', crudMethod: { ...crudConfigGroup }})
  },
  data() {
    return {
      dialog: false,
      groupSizeList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      permission: {
        add: ['admin', 'standardDrawingRelationGroup:add'],
        edit: ['admin', 'standardDrawingRelationGroup:edit'],
        del: ['admin', 'standardDrawingRelationGroup:del']
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.standardDiscipline = this.discipline
      return true
    },
    // 新增
    handelAdd() {
      this.crud.data.unshift({
        groupName: '',
        groupNodeList: [],
        groupSize: [],
        isEdit: true,
        standardDiscipline: this.discipline
      })
    },
    // 编辑
    handleEdit(row) {
      this.$set(row, 'originalData', { ...row })
      this.$set(row, 'isEdit', true)
    },
    // 保存
    handleSave(row) {
      if (row.groupName === '' || row.groupNodeList.length === 0 || row.groupSize === '') {
        return
      }
      if (row.groupId) {
        edit(row).then(() => {
          this.$set(row, 'isEdit', false)
          this.crud.toQuery()
        })
      } else {
        add(row).then(() => {
          this.$set(row, 'isEdit', false)
          this.crud.toQuery()
        })
      }
    },
    // 取消
    handleCancel(row, index) {
      if (row.groupId) {
        if (row.originalData) {
          Object.assign(row, row.originalData)
          this.$delete(row, 'originalData')
        }
        this.$set(row, 'isEdit', false)
      } else {
        this.crud.data.splice(index, 1)
      }
    },
    // 关闭弹框
    handleDialogClose() {
      this.dialog = false
      this.$parent.crud.toQuery()
    }
  }
}
</script>

<style scoped>
  .config-dialog>>>.el-dialog__body{
    padding-top: 9px;
  }
</style>
